<template>

  <div
    class="filter-container"
    style="padding: 20px 20px 0px"
  >
    <el-form
      :inline="true"
      :model="formData"
      label-position="right"
      size="small"
      class="filter-form-inline"
    >
      <el-row>

        <el-col :span="6">
          <el-form-item
            label="订单参与"
          >
            <el-select
              v-model="formData.selectType"
              clearable
              style="width: 100%"
              placeholder="请选择订单参与"
              @change="listSearch"
            >
              <el-option
                v-for="(item, idx) in selects"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />

            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="6">
          <el-form-item
            label="订单类型"
            style="margin-right:20px"
          >
            <el-select
              v-model="formData.orderType"
              clearable
              style="width: 100%"
              placeholder="请选择订单类型"
              @change="listSearch"
            >
              <el-option
                v-for="(item, idx) in orderTypes"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />

            </el-select>
          </el-form-item>
        </el-col>

        <el-col
                :span="4"
        >
          <el-form-item style="width: 100%">
            <more-search-btn v-model:is-more="visible" />
          </el-form-item>
        </el-col>

        <el-col :span="6">
          <el-form-item style="width: 100%;">
            <el-button class="border-btn" @click="onReset">重置</el-button>
            <el-button
              type="primary"
              class="main-btn"
              @click="listSearch"
            >搜索</el-button>
          </el-form-item>
        </el-col>

      </el-row>

      <el-row v-if="visible">

        <el-col :span="6">
          <el-form-item
            label="发货对象"
            style="margin-right:20px"
          >
            <el-select
              v-model="formData.objectId"
              filterable
              remote
              reserve-keyword
              :remote-method="objectMethod"
              :loading="loading"
              placeholder="请选择发货对象"
              @change="objectChange"
            >
              <el-option
                v-for="item in objects"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
        </el-col>

<!--        <el-col :span="6">-->
<!--          <el-form-item-->
<!--            label="渠道客户"-->
<!--            style="margin-right:20px"-->
<!--          >-->
<!--            <el-select-->
<!--              v-model="formData.agentId"-->
<!--              filterable-->
<!--              remote-->
<!--              reserve-keyword-->
<!--              :remote-method="agentMethod"-->
<!--              :loading="loading"-->
<!--              placeholder="请选择渠道客户"-->
<!--              @change="listSearch"-->
<!--            >-->
<!--              <el-option-->
<!--                v-for="item in agents"-->
<!--                :key="item.id"-->
<!--                :label="item.name"-->
<!--                :value="item.id"-->
<!--              />-->
<!--            </el-select>-->
<!--          </el-form-item>-->
<!--        </el-col>-->

        <el-col :span="6">
          <el-form-item
            label="产品名称"
            style="margin-right:20px"
          >
            <el-select
              v-model="formData.productId"
              filterable
              remote
              reserve-keyword
              :remote-method="productMethod"
              :loading="loading"
              placeholder="请选择产品"
              @change="listSearch"
            >
              <el-option
                v-for="item in products"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
        </el-col>

<!--        <el-col :span="6">-->
<!--          <el-form-item-->
<!--            label="订单编号"-->
<!--            style="margin-right:20px"-->
<!--          >-->
<!--            <el-input-->
<!--              v-model="formData.orderNumber"-->
<!--              clearable-->
<!--              placeholder="请输入订单编号"-->
<!--            />-->
<!--          </el-form-item>-->
<!--        </el-col>-->

        <el-col :span="6">
          <el-form-item
            label="发货记录编号"
            style="margin-right:20px"
          >
            <el-input
              v-model="formData.deliveryNo"
              clearable
              placeholder="请输入发货记录编号"
            />
          </el-form-item>
        </el-col>

        <el-col
                :span="8"
        >
          <el-form-item
            label="发货日期"
            style="width: 100%"
          >
            <date-range-picker
              v-model:date="formData.date"
              clearable
              style="width: 100%;"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            />
          </el-form-item>
        </el-col>

      </el-row>

    </el-form>
  </div>

  <table-view
    :visible="visible"
    :data="tableData"
  >
    <el-table-column
            width="50"
      type="index"
      label="序号"
      header-align="cente"
    />
    <el-table-column
      prop="productPopularName"
      label="产品通用名"
      align="left"
      header-align="center"
      min-width="150"
      show-overflow-tooltip
    />
    <el-table-column
      prop="productName"
      label="商品名"
      align="center"
      header-align="center"
      width="100"
      show-overflow-tooltip
    />
    <el-table-column
      prop="packSpecs"
      label="包装规格"
      align="center"
      header-align="center"
      width="100"
      show-overflow-tooltip
    />
    <el-table-column
            prop="producer"
            label="生产厂家"
            align="center"
            header-align="center"
            width="150"
            show-overflow-tooltip
    />
    <el-table-column
      prop="sellUnit"
      label="计价单位"
      align="center"
      width="100"
      header-align="center"
    >
      <template #default="scope">
        <span>{{ getLabel('sell_unit',scope.row.sellUnit) }}</span>
      </template>
    </el-table-column>
    <el-table-column
      prop="deliveryNumber"
      label="发货数量"
      align="center"
      width="150"
      header-align="center"
    />
    <el-table-column
      label="发货对象"
      align="left"
      width="150"
      show-overflow-tooltip
      header-align="center"
    >
      <template #default="scope">
        <span v-if="scope.row.orderType == 1">{{ scope.row.distributeName }}</span>
        <span v-else-if="scope.row.orderType == 2">{{ scope.row.terminalName }}</span>
        <span v-else-if="scope.row.orderType == 3">{{ scope.row.agentName }}</span>
        <span v-else-if="scope.row.orderType == 4">{{ scope.row.sellerName }}</span>
      </template>
    </el-table-column>
    <el-table-column
            prop="deliveryNo"
            label="发货记录编号"
            align="center"
            header-align="center"
            width="120"
            show-overflow-tooltip
    />
    <el-table-column label="订单类型" align="center" header-align="center" width="130">
      <template #default="scope">
        {{ getLabel("order_type",scope.row.orderType) }}
      </template>
    </el-table-column>
    <el-table-column
            width="150px"
      label="发货时间"
      align="center"
      header-align="center"
    >
      <template #default="scope">
        {{ dateFormat('yyyy-mm-dd HH:MM',scope.row.deliveryTime) }}
      </template>
    </el-table-column>
    <el-table-column
      label="操作人"
      align="center"
      header-align="center"
      width="150"
      show-overflow-tooltip
    >
      <template #default="scope">
        {{ scope.row.creatorName }}[{{scope.row.departmentName}}]
      </template>
    </el-table-column>

  </table-view>

  <Pagination
    v-model:page="formData.page"
    v-model:limit="formData.pageSize"
    style="display: flex; justify-content: flex-end"
    :total="total"
    @pagination="getList"
  />

</template>

<script>
import {defineComponent, inject, onMounted, reactive, ref, toRefs} from 'vue'

export default defineComponent({
  name: 'GoodsList',
  setup() {
    const api = inject('api')
    const selects = ref([
      {
        label: '全部',
        value: 0
      },
      {
        label: '我负责的',
        value: 1
      },
      {
        label: '我下级负责的',
        value: 2
      },
      {
        label: '我部门负责的',
        value: 3
      },
    ])
    const orderTypes = ref([
      {
        label: '直发配送商',
        value: '1'
      },
      {
        label: '直发代理',
        value: '3'
      },
      {
        label: '直发终端',
        value: '2'
      },
      {
        label: '直发商销客户',
        value: '4'
      }
    ])
    var data = reactive({
      tableData: [],
      formData: {
        page: 1,
        pageSize: 20,
        selectType: '',
        objectId: '',
        distributeId: '',
        terminalId: '',
        agentId: '',
        productId: '',
        orderNumber: '',
        deliveryNo: '',
        date: '',
        sellerId:'',
      },
      visible: false,
      total: 0,
      objects: [],
      loading: false,
      agents: [],
      products: [],
    })

    const listSearch = () => {
      data.formData.page = 1
      getList()
    }

    const onReset = () => {
      data.formData = {
        page: 1,
        pageSize: 20,
        selectType: '',
        objectId: '',
        distributeId: '',
        terminalId: '',
        agentId: '',
        productId: '',
        orderNumber: '',
        deliveryNo: '',
        date: '',
      }
      getList()
    }

    const getList = () => {
      const a = { ...data.formData }
      a.selectType = Number(a.selectType)
      a.objectId = Number(a.objectId)
      a.productId = Number(a.productId)
      a.terminalId = Number(a.terminalId)
      a.distributeId = Number(a.distributeId)
      a.agentId = Number(a.agentId)
      if (a.date && a.date.length) {
        a.deliveryTimeStart = a.date[0]
        a.deliveryTimeEnd = a.date[1]
      }
      api.order.GET_DELIVERY_DETAIL_LIST(a).then(res => {
        if (!res.code && res.data) {
          data.tableData = res.data.list
          data.total = res.data.total
        }
      })
    }

    const objectChange = () => {
      if (data.formData.objectId) {
        const index = data.objects.findIndex(a => a.id == data.formData.objectId)
        if (index != -1) {
          const o = data.objects[index]
          if (o.type == 1) {
            data.formData.distributeId = data.formData.objectId
          } else if (o.type == 2){
            data.formData.terminalId = data.formData.objectId
          } else if (o.type == 3){
            data.formData.agentId = data.formData.objectId
          } else if (o.type == 4){
            data.formData.sellerId = data.formData.objectId
          }
        }
      } else {
        data.formData.distributeId = 0
        data.formData.terminalId = 0
        data.formData.agentId = 0
        data.formData.sellerId = 0
      }

      listSearch()
    }

    const objectMethod = (query) => {
      data.objects = []
      data.loading = true

      if (query) {
        const a = {
          selectStr: query,
          type: 3
        }

        api.order.ORDER_DELIVERY_DOWN_LIST(a).then(res => {
          if (!res.code && res.data) {
            data.objects = res.data.list

            data.loading = false
          }
        })
      }else {
        data.loading = false
      }
    }

    const agentMethod = (query) => {
      data.agents = []
      data.loading = true

      if (query) {
        const a = {
          selectStr: query,
          type: 4
        }

        api.order.ORDER_DELIVERY_DOWN_LIST(a).then(res => {
          if (!res.code && res.data) {
            data.agents = res.data.list

            data.loading = false
          }
        })
      }else {
        data.loading = false
      }
    }

    const productMethod = (query) => {
      data.products = []
      data.loading = true

      if (query) {
        const a = {
          selectStr: query,
          type: 1
        }

        api.order.ORDER_DELIVERY_DOWN_LIST(a).then(res => {
          if (!res.code && res.data) {
            data.products = res.data.list

            data.loading = false
          }
        })
      }else {
        data.loading = false
      }
    }

    onMounted(() => {
      getList()
    })

    return {
      ...toRefs(data),
      selects,
      orderTypes,

      getList,
      listSearch,
      onReset,
      objectChange,
      objectMethod,
      agentMethod,
      productMethod,
    }
  }
})
</script>

<style scoped>

</style>
